<template>
    // 下面这段代码是用来实现滚动条的
    <div class="container" style="height:300px;overflow-y: auto;" @scroll="onScroll">

        
        <div class="scroll" :style="{ height: arr.length * 30 + 'px' }">
            // 下面这段代码是干嘛的?
            // 1. 通过 :style="{ height: currentIndex * 30 + 'px' }" 设置 div 的高度为 currentIndex * 30 + 'px'
            // 2. 通过 currentIndex 获取当前滚动条的位置，对应的数组的索引
            <div class="placeholder" :style="{ height: currentIndex * 30 + 'px' }"></div>

            
            // 下面的div是干嘛的?
            // 1. 通过 v-for 循环 displayArr 数组
            // 2. 通过 :style="{ height: '30px' }" 设置每个 div 的高度为 30px
            // 3. 通过 {{ item }} 显示每个 div 的内容
            // 4. 通过 :key="item" 设置每个 div 的 key
            <div class="item" v-for="(item, index) in displayArr" :key="item" :style="{ height: '30px' }">
                {{ item }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 下面这段代码是干嘛的?
            // 1. 通过 currentIndex 初始化一个变量，是 0
            currentIndex: 0
        }
    },
    computed: {
        // 下面这段代码是干嘛的?
        // 1. 通过 currentIndex 获取当前滚动条的位置，对应的数组的索引
        // 2. 通过 slice() 方法，获取当前滚动条的位置，对应的数组的索引，到当前滚动条的位置，对应的数组的索引 + 10 的数组
        displayArr() {
            return this.arr.slice(this.currentIndex, this.currentIndex + 10)
        }
    },
    created() {
        // 初始化一个数组 arr，是 1-1000 的数字
        this.arr = Array.from({ length: 1000 }, (_, k) => k + 1)
    },
    methods: {
        onScroll(e) {
            // 下面这段代码是干嘛的?
            // 1. 通过 scrollTop 获取当前滚动条的位置
            // 2. 通过 Math.floor() 方法，获取当前滚动条的位置，除以 30，得到当前滚动条的位置，对应的数组的索引
            const scrollTop = e.target.scrollTop
            this.currentIndex = Math.floor(scrollTop / 30)
        }
    }
}
</script>
